<template>
	<view class="container">
		
		<view class="tui-set-box">
			
			<tui-list-cell padding="0" :lineLeft="0">
				<view class="tui-list-cell tui-info-box">
					<image :src="myImgLogo" class="tui-avatar"></image>
					<view>{{myName}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell v-if="false" padding="0" :lineLeft="0" :arrow="true" @click="goMyAddressIndex()">
				<view class="tui-list-cell">
					<view class="tui-list-cell-key">收货地址管理</view>
					<view class="tui-list-cell-val"></view>
				</view>
			</tui-list-cell>
			
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="0" :arrow="myPhone ? false : true" @click="goMyBindPhone()">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">手机号码</view>
						<view class="tui-list-cell-val">{{myPhone}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">我的昵称</view>
						<view class="tui-list-cell-val">{{myInfo.name}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">电子邮箱</view>
						<view class="tui-list-cell-val">{{myInfo.email}}</view>
					</view>
				</tui-list-cell>
			</view>
			
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="0">
					<view class="tui-list-cell">
						关于我们
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0">
					<view class="tui-list-cell">
						联系客服
					</view>
				</tui-list-cell>
				<!-- <tui-list-cell padding="0" :lineLeft="0" :arrow="true" @click="goPayWxOrder()">
					<view class="tui-list-cell">
						测试支付
					</view>
				</tui-list-cell> -->
			</view>
			
			<view class="tui-edit" @click="goMyBaseEdit()">
				<tui-button type="primary" width="500rpx" height="80rpx" :size="30">编辑信息</tui-button>
			</view>
			
			<view class="tui-edit" @click="goWeChat()">
				<tui-button type="green" width="500rpx" height="80rpx" :size="30">微信授权头像和昵称</tui-button>
			</view>


			<view class="tui-exit" @click="doWeLogout()">
				<tui-button type="gray" width="500rpx" height="80rpx" :size="30">退出登录</tui-button>
			</view>
		</view>
		
		<footer-menu :tabCur="2"></footer-menu>
		
	</view>
</template>

<script>
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	export default {
		components: {
			tuiListCell,
			tuiButton,
			tuiIcon,
			footerMenu
		},
		
		data() {
			return {
				myId: 0,
				myName: '',
				myPhone: '',
				myEmail: '',
				myImgLogo: '',
				myCate: 9,
				myInfo: [],
				
				
			}
		},
		
		methods: {
			
			goMyAddressIndex: function(){
				uni.navigateTo({
					url: '/pages/my-address/index'
				});
			},
			
			goMyBaseEdit: function(){
				uni.navigateTo({
					url: '/pages/my/base-edit'
				});
			},
			
			goWeChat: function() {
				uni.navigateTo({
					url: '/pages/we/auth'
				})
			},
			
			goMyBindPhone: function(){
				if(this.myPhone) {
					this.tui.toast('你的手机号码已绑定');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-phone'
				});
			},
			
			goMyBindEmail: function(){
				if(this.myEmail) {
					this.tui.toast('你的电子邮箱已绑定');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-email'
				});
			},
			
			goMyBindSubPhone: function(){
				if(!this.canBindSubPhone) {
					this.tui.toast('该功能暂未开通');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-sub-phone'
				});
			},
			
			goMySubPhoneList: function(){
				uni.navigateTo({
					url: '/pages/my/bind-sub-list'
				});
			},
			
			goPayWxOrder: function(){
				uni.navigateTo({
					url: '/pages/pay/wx-order'
				});
			},
			
			
			getMyBaseInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.myInfo = resData;
						this.myId = resData.id;
						this.myName = resData.user_name;
						this.myPhone = resData.phone;
						this.myEmail = resData.email;
						this.myImgLogo = resData.img_logo;
					}
				});
			},
			
		
			//退出登录
			doWeLogout: function(){
				uni.setStorageSync('userId', 0);
				uni.setStorageSync('userToken', '');
				uni.setStorageSync('hasLogin', false);
				
				uni.navigateTo({
					url: '/pages/my/login'
				});
			},
		},
		
		onLoad: function(options) {
			this.getMyBaseInfo();
		},
	}
</script>

<style>
	
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}
	
	.tui-list-cell-key {
		width: 200rpx;
	}
	
	.tui-list-cell-val {
		color: #00CC99;
	}

	.tui-info-box {
		font-size: 34rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}
	
	.tui-edit {
		margin-top: 50rpx;
		padding: 50rpx 100rpx;
	}

	.tui-exit {
		margin-top: 100rpx;
		padding: 100rpx 100rpx;
		margin-bottom: 200rpx;
	}
</style>